<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>没有添加修饰符</p>
        <input type="text" v-model="msg"></input>

        <p>添加修饰符 .lazy</p>
        <!-- .lazy 不是实时改变 而是在失去焦点时才更新 -->
        <input type="text" v-model.lazy="msg"></input>

        <p>.number</p>
        <!-- .number 输入框必须数值 否则会清空 当先输入的是字符串 后输入的数字 就无法将字符串省略掉 -->
        <input type="text" v-model.number="num"></input>

        <p>.trim</p>
        <!-- .trim 去除首尾空格 -->
        <input type="text" v-model.trim="msg"></input>

        <p>失去焦点时更新 并且去除首尾空格</p>
        <!-- .trim 去除首尾空格 -->
        <input type="text" v-model.trim.lazy="msg"></input>


    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'修饰符',
                num:221133
            }
        });


    </script>
</body>
</html>